<template>
  <div class="top10-echart">
    <div class="top10-echart__content" ref="echartRef"></div>
    <div v-if="loading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const echartRef = ref()
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
})

function handlerData(type) {
  let times = []
  let count = []
  let realCount = []
  if (props.data.length > 0) {
    props.data.forEach(r => {
      times.push(r.TYPE)
      count.push(r.COUNT)
      realCount.push(r.realCount)
    })
  } else {
    times = Array.from({ length: 24 }).map((r, i) => { return `0${i}:00` })
    count = times.map(r => 0)
    realCount = times.map(r => 0)
  }
  switch(type) {
    case "时间": return times;
    case "过板数": return count;
    case "标准产能": return realCount;
  }
}

function draw(rows) {
  let option = {
    textStyle: {
      fontSize: 18,
    },
    grid: {
      containLabel: true,
      top: "40px",
      left: "0",
      right: "60px",
      bottom: "0",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      show: false,
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        name: '时间',
        axisLine: { // x轴底线
          show: true
        },
        splitLine: { // 分割线
          show: false
        },
        axisLabel: { // x轴坐标样式
          fontSize: 16,
          color: "#FFF"
        },
        // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00'],
        // data: Array.from({ length: 24 }).map((r, i) => { return `0${i}:00` }),
        data: handlerData("时间"),
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '产能',
        min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: '{value}'
        },
        splitLine: { // 分割线
          show: false
        },
        axisLabel: { // y轴坐标样式
          fontSize: 16,
          color: "#FFF"
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: "solid"
          }
        }
      },
      {
        show: false,
        type: 'value',
        name: '标准产能',
        min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: '{value}'
        },
        splitLine: { // 分割线
          show: false
        },
      }
    ],
    series: [
      {
        name: '实际产能',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        // data: Array.from({ length: 24 }).map(_ => Math.floor(Math.random()*1000)),
        data: handlerData("过板数"),
        itemStyle: {
          normal: {
            // color: function(params) {
            //   const val = params.value[0]
            //   return "rgb(243, 158, 104)"
            // }
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // x1, y1, x2, y2 定义渐变的起点和终点位置
                [
                  // {offset: 0, color: '#83bff6'},   // 渐变起始颜色
                  // {offset: 0.5, color: '#188df0'}, // 渐变中间颜色
                  // {offset: 1, color: '#188df0'}    // 渐变结束颜色

                  {offset: 0, color: '#FFF'},
                  {offset: 0.5, color: 'rgb(243, 158, 104)'},
                  {offset: 1, color: 'rgb(216, 109, 28)'}
                  
                ]
            )
          }
        }
      },
      {
        name: '标准产能',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        // data: Array.from({ length: 24 }).map(_ => Math.floor(Math.random()*1000))
        data: handlerData("标准产能")
      }
    ]
  }


  if (echartRef.value) {
    let myChart = echarts.init(echartRef.value, 'light', {
      renderer: 'canvas',
      useDirtyRect: false
    })
    myChart.setOption(option)
    setTimeout(myChart.resize, 300)
  }
}

watch(() => props.data, draw, { immediate: true })

onMounted(() => {
  draw()
})
</script>
<style lang="less" scoped>
.top10-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .top10-echart__content {
    width: 100%;
    height: 100%;
  }
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
